<template>
    <div class="admin-page">
        <adminMenu v-if="isShowMenu" />

        <div :class="['admin-right-main', isShowMenu ? '' : 'admin-right-main-1']">
            <keep-alive>
                <router-view v-if="$route.meta.isKeepLive"></router-view>
            </keep-alive>

            <transition name="component-fade-opacity" mode="out-in">
                <router-view v-if="!$route.meta.isKeepLive"></router-view>
            </transition>
        </div>
    </div>
</template>

<script>
import DialogForm from '@/components/async/dialogForm.vue'
import PagingSelectCom from '@/components/async/PagingSelectCom.vue'
import SearchComp from '@/components/async/SearchComp.vue'
import TrainPage from '@/components/async/TrainPage.vue'

Vue.component('DialogForm', DialogForm)
Vue.component('PagingSelectCom', PagingSelectCom)
Vue.component('SearchComp', SearchComp)
Vue.component('TrainPage', TrainPage)

export default {
    components: {
        adminMenu: () => import('@/components/adminMenu/index.vue'),
    },
    data() {
        return {}
    },
    computed: {
        ...Vuex.mapState(['url_title']),
        isShowMenu() {
            return this.$route.meta.isAdminMenu !== false
        },
    },
    methods: {},
}
</script>

<style lang="scss" scoped>
.admin-page {
    background-color: #fff;
    width: 100vw;
    height: 100vh;
    display: flex;
    overflow: hidden;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.admin-right-main {
    flex: 1;
    max-width: calc(100vw - 200px);
    padding: 15px 15px 0;
    background-color: #f7f8fa;
}
.admin-right-main-1 {
    max-width: 100vw;
    padding: 0;
}
</style>
